<div class="content" style="bottom: 0;">
    <div class="content_bg_a">
        <div class="main_img">
            <{if $page_product_basic.zhelv}>
            <div class="promotion_discount_detail">
                <span><{$page_product_basic.zhelv}>折</span>
            </div>
            <{/if}>
            <div class="swiper-container" style="z-index: 0;">
                <div class="swiper-wrapper" style="z-index: 0;">
                    <{foreach from=$page_product_basic.images key=key item=item}>
                    <div class="swiper-slide"><img src="<{$item.image_id|storager}>" alt=""></div>
                    <{/foreach}>

                </div>
                <div class="swiper-pagination"></div>
            </div>
            <!--<img src="<{$page_product_basic.image_default_id|storager:'s'}>"></div>-->
        <div class="main_img_under">
            <div class="main_img_under_content1">
                <span class="main_img_under_a"><{$page_product_basic.title}></span>
                <span class="main_img_under_b"><{$product_price.price|cur_odr}></span>
                <{if $product_price.mktprice >0}>
                    <del style="font-size: 12px;"><{$product_price.mktprice|cur_odr}></del>
                <{/if}>
            </div>
            <div class="main_img_under_content2">
                <{if $element}>
                    <span class="main_img_under_c"><{$element.name}>:<{$element.ele}></span>
                <{/if}>
                <span class="main_img_under_c" id="product_store"></span>
            </div>
            <div class="clearfix"></div>
        </div>
        <{if $page_product_basic.brief}>
            <div class="details_page_cue">
                <p><{$page_product_basic.brief}></p>
            </div>
        <{/if}>
        <div class="option_box">
            <{foreach from=$page_product_basic.spec.goods key=key item=spec}>
            <div class="option_box_a">
                <span class="option_title"><{$page_product_basic.spec.specification.spec_name.$key}>:</span>
                <{foreach from=$spec key=item_key item=item}>
                <{if $item_key==$page_product_basic.spec.product.$key}>
                <span class="option_button_a option_button_xh current"><{$item.spec_value}></span>
                <{else}>
                    <{if $item.product_id}>
                        <span class="option_button_a option_button_yp" onclick="document.location='<{link app=b2c ctl=wap_product act=index arg0=$item.product_id}>';"><{$item.spec_value}></span>
                    <{/if}>
                <{/if}>
                <{/foreach}>
                <div class="clearfix"></div>
            </div>
            <{/foreach}>
            <form action="<{link app=b2c ctl=wap_cart act=add arg0=goods}>" method="post" id="buy_form" data-type="ajax">
                <input type="hidden" name="btype" class="btype"><!-- value="is_fastbuy" 立即购买提交的时候要带上这个值 -->
                <input type="hidden" name="goods[goods_id]" value="<{$page_product_basic.goods_id}>"/>
                <input type="hidden" name="prepare_type" value="<{$page_product_basic.promotion_type}>">
                <input type="hidden" name="goods[product_id]" value="<{$page_product_basic.product_id}>"/ >
                <input type="hidden" name="min" value="1" class="min-num" />
                <input type="hidden" name="max" value="<{$product_store.store}>" class="max-num" />
                <input type="hidden" name="mini_cart" value="true"/>
                <div class="option_box_b J-pt-num" id="product_container">
                </div>
            </form>
        </div>
        <div class="content-padded grid-demo">
            <div class="row details_nav_box">
                <div class="col-33 details_nav act">商品详情</div>
                <div class="col-33 details_nav" data-url="<{link app=b2c ctl=wap_product act=productBasicIntro arg0=$page_product_basic.product_id}>">商品参数</div>
                <div class="col-33 details_nav" data-url="<{link app=b2c ctl=wap_product act=goodsConsultInit arg0=$page_product_basic.goods_id arg1=$page_product_basic.product_id}>">商品咨询</div>
            </div>
        </div>
        <div class="details_img panel-tab act">
            <{$intro}>
        </div>
        <div class="panel-tab"></div>
        <div class="panel-tab"></div>
        <div class="back_top" id="backToTop"><a href="#"><{img src="images/back_top.png" app='wap'}></a></div>
    </div>
</div>
<div id="peihuo-pop" class="peihuo-pop" style="display:none;height: 100%;">

</div>
<div class="popup_box buhuo">
    <form class="form" method="post" action="<{link app=b2c ctl=wap_product act=toNotify}>" data-type="ajax" id="to-supplement">
    <input type="hidden" name="item[0][goods_id]" value="<{$page_product_basic.goods_id}>">
    <input type="hidden" name="item[0][product_id]" value="<{$page_product_basic.product_id}>">
    <input type="hidden" name="supplement" value="1">
    <div class="popup_content_box">
        <div class="popup_title">补货通知</div>
        <div class="popup_content">
            <p>该货品在途中，请在下面输入您的邮箱地址或手机号码，当我们有现货供应时，我们会通知您！</p>
            <div class="popup_search">
                <span>邮箱地址 :</span>
                <input type="text" name="email">
                <div class="clearfix"></div>
            </div>
            <div class="popup_search">
                <span>手机号码 :</span>
                <input type="text" name="cellphone">
                <div class="clearfix"></div>
            </div>

            <div class="popup_text">注：关注微信公众号 <span>安爵缔丽1919</span> 可自动接收到货通知</div>
            <a href="javascript:void(0);" class="button button-fill button-success popup_button_color" id="go-supplement">提交</a>
        </div>
        <{img class="icon_close" src="images/icon_close.png" app='wap'}>
    </div>
    </form>
</div>
<div class="popup_box daohuo">
    <form class="form" method="post" action="<{link app=b2c ctl=wap_product act=toNotify}>" data-type="ajax" id="to-notify">
    <input type="hidden" name="item[0][goods_id]" value="<{$page_product_basic.goods_id}>">
    <input type="hidden" name="item[0][product_id]" value="<{$page_product_basic.product_id}>">
    <div class="popup_content_box">
        <div class="popup_title">到货通知</div>
        <div class="popup_content">
            <p>该货品暂时缺货，请在下面输入您的邮箱地址或手机号码，当我们有现货供应时，我们会通知您！</p>
            <div class="popup_search">
                <span>邮箱地址 :</span>
                <input type="text" name="email">
                <div class="clearfix"></div>
            </div>
            <div class="popup_search">
                <span>手机号码 :</span>
                <input type="text" name="cellphone">
                <div class="clearfix"></div>
            </div>

            <div class="popup_text">注：关注微信公众号 <span>安爵缔丽1919</span> 可自动接收到货通知</div>
            <a href="javascript:void(0);" class="button button-fill button-success popup_button_color" id="go-notify">提交</a>
        </div>
        <{img class="icon_close" src="images/icon_close.png" app='wap'}>
    </div>
    </form>
</div>
<div class="commodity_details_bottom">
    <div class="CDB_float CDB_17" onclick="document.location='<{link app=b2c ctl=wap_cart act=index}>';">
        <{img src="images/bottom_6.png" app='wap'}>
        <span>购物车</span>
    </div>
    <div class="CDB_float CDB_17 collect btn-addfav favlist" data-gid="<{$page_product_basic.goods_id}>">
        <div class="is_fav">
            <{img src="images/bottom_5.png" app='wap'}>
        </div>
        <span>收藏</span>
    </div>
    <div class="CDB_float CDB_33 CDB_33_A" id="J_buy_btn">加入购物车</div>
    <div class="CDB_float CDB_33 CDB_33_B" id="J_fast_buy">立即购买</div>
</div>

<script>
    var mySwiper = new Swiper ('.swiper-container', {
        paginationClickable: true,
        speed: 2000,
        loop: true,
        autoplay:{
            autoplay:true,
            delay:2500
        },
        pagination: {
            el: '.swiper-pagination',
        },
    });
$('.bar-tab').remove();
var container = $('#product_container');
//请求库存和价格
var Router = {
  stock: function(id) {
      return '<{link app=b2c ctl=wap_product act=ajax_product_store arg0="' + id + '"}>';
  },
};
var Query = function(url, options) {
    this.send = function(url, options) {
        options = Object.merge({
            url: url,
            method: 'post',
            link: 'chain'
        }, options || {});
        return new Request(options).send();
    };
    this.stock = function(options) {
        var url = Router.stock(options.id);
        options = Object.merge({
            method: 'get',
            onSuccess:function(rs) {
                rs = JSON.decode(rs);
                rs.store = rs.store.toFixed(2);
                $('#product_store').html('库存:'+rs.store+'<{$page_product_basic.unit}>');
                if(rs.store==='0.00') {
                    var notify = '<div class="action-notify">到货通知</div>';
                    $('.CDB_33_A, .CDB_33_B').hide();
                    $('.commodity_details_bottom').append(notify);
                }
                if(rs && Object.getLength(rs)) {
                    if(rs.error) {
                        return Message.error(rs.error);
                    }
                    var tongzhiTpl = '';
                    if (options.atext == "<{t}>现货<{/t}>" || options.atext == "现货") {
                        if(options.w_arrive == "1"){
                            var tpl = '<span class="option_title">数量:</span>  <div class="display_content_A"> <div style="height: 1.2rem;float: left;"> <input name="goods[num]" class="option_input" type="number" value="0" readonly="readonly"> </div> <div class="option_button_b" onclick="javascript:picking(<{$page_product_basic.product_id}>);">我要配货</div> <input type="hidden" name="goods[madan_ids]"><input type="hidden" name="goods[juanshu]"><input type="hidden" name="goods[cntM]">';
                            tongzhiTpl = '<span class="daohuo_time"><{t}>预计补货数量和到货时间<{/t}>:&nbsp;&nbsp;<br>'+rs.daohuo_mi+'<{t}><{$page_product_basic.unit}><{/t}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+rs.daohuo_time+'</span><div class="option_button_c"> <span class="option_button_border" onclick="arrival()">即将到货</span> <span class="option_button_border" onclick="arrival_inform()" style="border-left: none;">补货通知</span> </div> </div>  <div class="clearfix"></div>';
                        }else{
                            var tpl = '<span class="option_title">数量:</span>  <div class="display_content_A"> <div style="height: 1.2rem;float: left;"> <input name="goods[num]" class="option_input" type="number" value="0" readonly="readonly"> </div> <div class="option_button_b" onclick="javascript:picking(<{$page_product_basic.product_id}>);">我要配货</div> <input type="hidden" name="goods[madan_ids]"><input type="hidden" name="goods[juanshu]"><input type="hidden" name="goods[cntM]"> <div class="clearfix"></div>';
                        }
                        tpl += '<div style="margin-top: 0.8rem;margin-bottom: 0.4rem;"><span class="option_title"><{t}>已锁定:'+rs.storeLock+'<{$page_product_basic.unit}><{/t}></span></div><div class="clearfix"></div>';
                    }else{
                          var tpl = '<span class="p-quantity"><a href="javascript:void(0);" class="btn-decrease">-</a><input type="text" name="goods[num]" class="action-quantity-input" value="1" min="1" max="{store}"><a href="javascript:void(0);" class="btn-increase">+</a></span> <span class="">{title}（<{t}>库存<{/t}>: <span>{store}<{t}><{$page_product_basic.unit}><{/t}></span> ）</span><input type="hidden" name="stock" value="{store}">';
                          var tpl = '<span class="option_title">数量:</span> <div class="display_content_B"> <ul class="nmb_jj"> <li class="jian">-</li> <li> <input name="goods[num]" type="text" value="1" class="srkk" /> </li> <li class="jia">+</li> <div class="clearfix"></div> </ul> </div> <div class="clearfix"></div> ';
                    }
                    tpl += tongzhiTpl;
                    container.html(tpl);
                }
            }
        }, options || {});
        this.send.delay(300, this, [url, options]);
    };
};
Query = new Query;
attachAction('<{$page_product_basic.product_id}>','<{$page_product_basic.type}>','<{$page_product_basic.w_arrive}>');
//== 处理商品基本信息交互
function attachAction(id,atext,w_arrive) {
    //== 价格和库存异步加载
    // Query.price({id: id});
    Query.stock({id: id,atext: atext,w_arrive: w_arrive});
}
$(".option_button_a").click(
    function(){
        $(".option_button_a").removeClass("current")
        $(this).addClass("current")
    }
)

function picking(product_id){
    $('.content').prop('scrollTop','30px')
    $('.content').css({
    　　"overflow-x":"hidden",
    　　"overflow-y":"hidden"
    });
    $('#peihuo-pop').show();
    var url = "<{link app=b2c ctl=wap_order act=select_bujuan}>";
    $.get(url,{product_id:product_id},function(re){
        $('#peihuo-pop').html(re);
        var inputIds = $$('[name="goods[madan_ids]"]');
        var inputMi = $$('[name="goods[num]"]');
        var inputJu = $$('[name="goods[juanshu]"]');
        var madan_ids=inputIds.get('value');
        var mishu=inputMi.get('value');
        var juanshu=inputJu.get('value');
        if (madan_ids != '') {
            var arr=madan_ids[0].split(',');//注split可以用字符或字符串分割
            for (var i=0;arr[i];i++){
               $$("[id='chkRoll["+arr[i]+"]']").set('checked','checked');
            }
            //往选中之中填值
            //合计显示在页面上
            var totalStr="<b><{t}>选中<{/t}>:"+"<font color='red'>"+juanshu+"</font>&nbsp;&nbsp;<{t}>卷<{/t}>&nbsp;&nbsp;<{t}>共<{/t}>:"+"<font color='red'>"+mishu+"</font>&nbsp;&nbsp;M</b> <div type='hidden' id='total' value='"+mishu+"' cntJuan='"+juanshu+"' madan_ids='"+madan_ids+"'></div> ";
            var spanDiv=window.document.getElementById ("divTotal");
            spanDiv.innerHTML = totalStr;
        }
    });
}
function tola(){
        var $li = $(".fwmc_xxk").children("li.on");
        var money = $li.children("i").text();
        var count = $(".srkk").val();
        $(".zwfb_zje span").text(money*count);
}
function arrival(product_id){
    var url = '<{link app=b2c ctl=wap_product act=arrivalByJxc arg0=$page_product_basic.product_id}>';
    window.open(url,'_self');
}
function arrival_inform(){
    $(".buhuo").css('display','block');
}
$(".icon_close") .click(function(){
    $(".buhuo, .daohuo").css('display','none')
})
$('.details_nav').on('tap',function(e){
    if($(this).attr('data-url') && $(this).attr('data-url') != 'true'){
        $.get($(this).attr('data-url'),function(re){
            $($('.panel-tab')[$(this).index()]).html(re);
        }.bind(this));
        $(this).attr('data-url','true');
    }
    $(this).add($('.panel-tab')[$(this).index()]).addClass('act').siblings('.act').removeClass('act');
});

window.onload=function(){
    $('.details_img').find('table').removeAttr('width').removeAttr('height');
    $('.details_img table img').removeAttr('width').removeAttr('height');

}
$(".commodity_details_bottom").delegate(".action-notify","tap",function(){
  $(".daohuo").css('display','block');
});

$('#J_fast_buy').on('click',function(e){
    $('#buy_form').find('.btype').val('is_fastbuy');
    $('#buy_form').submit();
    return false;
});
$('#J_buy_btn').on('click',function(e){
    var data = $('#buy_form').serialize();
    $.post($('#buy_form').attr('action'),data,function(re){
        if(re){
            try{
                result = $.parseJSON(re);
                alert(result.error);
                } catch (e){
                    $('#peihuo-pop').html(re);
                    $('#peihuo-pop').show();
                }

        }
    });
    return false;
});
$('#go-supplement').on('click',function(e){
    var data = $('#to-supplement').serialize();
    $.post($('#to-supplement').attr('action'),data,function(re){
        result = $.parseJSON(re);
        if(result.error){
            alert(result.error);
        }else{
            alert(result.success);
            location.reload();
        }
    });
});
$('#go-notify').on('click',function(e){
    var data = $('#to-notify').serialize();
    $.post($('#to-notify').attr('action'),data,function(re){
        result = $.parseJSON(re);
        if(result.error){
            alert(result.error);
        }else{
            alert(result.success);
            location.reload();
        }
    });
});
// 初始化购物车的收藏按钮状态
$.post('<{link app=b2c ctl=wap_product act=is_fav}>','goods_id=<{$page_product_basic.goods_id}>',function(re){
  if(re==1){
    $('.is_fav').html('<{img src="images/bottom_now_5.png" app="wap"}>');
    $('.favlist').removeClass('btn-addfav').addClass('btn-faved').find('span').css('color','#d1bb7f').html('已收藏');
  }
});

//收藏商品
$('.btn-addfav').bind('click',function(){
    var $this = $(this);
    if($this.hasClass('btn-faved')) return;
    var data = 'gid='+$this.attr('data-gid')+'&type=goods';
    $.post('<{link app=b2c ctl=wap_member act=ajax_fav}>',data,function(re){
        $('.is_fav').html('<{img src="images/bottom_now_5.png" app="wap"}>');
        $this.removeClass('btn-addfav').addClass('btn-faved').find('span').css('color','#d1bb7f').html('已收藏');
    });
    return false;
});
$("#backToTop").on("click", function(){
    $(".content").scrollTop(0);
});

// 设置商品数量
function setQuantity(el,flag){
    var ipt = el.parent().find('.srkk'),
        max = parseInt(el.parents('form').find('.max-num').val()),
        min = parseInt(el.parents('form').find('.min-num').val()),
        val = parseInt(ipt.val());

    switch(flag){
        case 1:
            if(!/^\d+$/.test(val))
                ipt.val(min);
            else if(val > min)
                ipt.val( val-1 );
            else if(val == min)
                popup('此商品最少购买' + min + '件');
            break;
        case 2:
            if(val < max)
                ipt.val( +val+1 );
            else if(val >= max)
                popup('此商品最多只能购买' + max + '件');
            break;
        case 3:
            if(!/^\d+$/.test(val)) {
                ipt.val(min);
            } else if(val > max){
                popup('此商品最多只能购买' + max + '件');
                ipt.val(max);
            } else if(val < min){
                popup('此商品最少购买' + min + '件');
                ipt.val(min);
            }
            break;
    }

}
//商品数量加减
$('.J-pt-num').on('tap',function(e){
    var el = $(e.srcElement),
        n = 0;
    if( el.hasClass('jian') ){
        n=1;
    }else if( el.hasClass('jia') ){
        n=2;
    }else{
        return;
    }
    setQuantity(el,n);
});
$('.num-ipt').on('change',function(){
    setQuantity( $(this),3 );
});
function popup(msg) {
    var tpl = $('<div class="popup2">' + msg + '</div>').appendTo(document.body);
    var timer = setTimeout(function(){
        tpl.remove();
    }, 3000);
}
</script>
